{% extends "base/front.html" %}

{% block title %}创作文章{% endblock %}

{% block head %}
{% if request.args.get("editor", "wangEditor") == "wangEditor" %}
    <!-- 引入wangEditor.css -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='wangEditor/css/wangEditor.min.css') }}">
{% else %}
    <!-- 引入Editor.md.css -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='Editor.md/css/editormd.min.css') }}">
{% endif %}
{% endblock %}

{% block PathNavigation %}
            <ul class="breadcrumb">
                <li>
                     <a href="{{ url_for('front.index') }}">首页</a>
                </li>
                <li class="active">
                    创作
                </li>
            </ul>
{% endblock %}

{% block container %}
        <div>
        {% if g.username not in g.api.user_get_authors().data %}
            <center>
            <div class="alert alert-warning" role="alert">
                <a href="mailto:staugur@saintic.com" title="当前通过邮件申请" class="alert-link alert-warning">抱歉, 您当前没有权限创作, 请申请!</a>
            </div>
            </center>
        {% else %}
            <form class="form-horizontal" role="form" id="CreateBlogFormId">
                <center><h3>
                    <scan class="help-block"><i class="icon-pencil icon-1x"></i>&nbsp;创作文章
                    <input type="button" onclick=postForm() value="提交文章" class="btn btn-success btn-xs" />
                    {%- if request.args.get("editor", "wangEditor") == "wangEditor" %}
                        <a href="{{ url_for('front.blogWrite', editor='Editor.md') }}" class="btn btn-info btn-xs" role="button">&nbsp;切换编辑器</a>
                    {% else %}
                        <a href="{{ url_for('front.blogWrite', editor='wangEditor') }}" class="btn btn-info btn-xs" role="button">&nbsp;切换编辑器</a>
                    {% endif -%}
                    </scan>
                </h3></center>
                <div class="form-group">
                    <label for="blogTitle" class="col-sm-2 control-label"><i class="icon-ok-sign"></i>&nbsp;文章标题</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="blogTitle" name="title" placeholder="请在此处填写文章标题" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="blogTag" class="col-sm-2 control-label"><i class="icon-tags"></i>&nbsp;文章标签</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="blogTag" name="tag" placeholder="请在此处输入标签并以空格分割" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="blogCatalog" class="col-sm-2 control-label"><i class="icon-folder-open"></i>&nbsp;文章分类</label>
                    <div class="col-sm-10">
                        <select class="form-control" id="blogCatalog" name="catalog">
                            <option>未分类</option>
                            {% for catalog in g.api.blog_get_catalog_list().data %}
                            <option>{{ catalog }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="blogSource" class="col-sm-2 control-label"><i class="icon-info-sign"></i>&nbsp;文章来源</label>
                    <div class="col-sm-10">
                        <label class="radio-inline">
                            <input type="radio" name="sources" value="原创" checked="checked">原创
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sources" value="转载">转载 
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sources" value="翻译">翻译
                        </label>
                    </div>
                </div>
                <div class="form-group">
                {%- if request.args.get("editor", "wangEditor") == "wangEditor" %}
                    <textarea class="form-control" id="editor" style="height:600px; max-height:700px; width: 100%" name="content"><p>请输入文章内容...</p></textarea>
                {% else %}
                    <div id="editor">
                        <textarea style="display:none;" name="content"># 请输入文章内容...</textarea>
                    </div>
                {% endif -%}
                </div>
                <div class="form-group">
                    <input type="hidden" class="form-control" name="author" value="{{ g.username }}">
                </div>
                <div class="form-group">
                    <input type="hidden" class="form-control" name="editor" value="wangEditor">
                </div>
            </form>
        {% endif %}
        </div>
{% endblock %}

{% block script %}
{% if request.args.get("editor", "wangEditor") == "wangEditor" %}
    <!--引入jquery和wangEditor.js-->
    <script type="text/javascript" src="{{ url_for('static', filename='wangEditor/js/wangEditor.min.js') }}"></script>
    <script type="text/javascript">
        // 获取元素
        var div = document.getElementById('editor');
        // 生成编辑器
        var editor = new wangEditor(div);
        // 为当前的editor配置密钥
        editor.config.mapAk = 'rsG1HfOkrldOGdI53TMI9rAdxGuzb0PI';
        // 取消粘贴过滤
        editor.config.pasteFilter = true;
        // 插入代码时的默认语言
        editor.config.codeDefaultLang = 'python';
        /*
        上传图片功能，文档地址：http://www.kancloud.cn/wangfupeng/wangeditor2/113990；
        后台文档地址：http://www.kancloud.cn/wangfupeng/wangeditor2/115736;
        后台需要配置一个获取表单上传图片并保存的路由。
        */
        editor.config.uploadImgUrl = "{{ url_for('upload.UploadBlogImage', editorType='wangEditor') }}";
        editor.config.uploadImgFileName = 'WriteBlogImage';
        // 创建编辑器
        editor.create();
    </script>
{% else %}
    <!--引入jquery和Editor.md.js-->
    <script type="text/javascript" src="{{ url_for('static', filename='Editor.md/js/editormd.min.js') }}"></script>
    <script type="text/javascript">
        var Editor;
        $(function() {
            Editor = editormd({
                id      : "editor",
                width   : "100%",
                height  : 500,
                syncScrolling : "single",
                path    : "/static/Editor.md/lib/",
                // 开启上传图片功能
                imageUpload : true,
                imageFormats : ['png', 'jpg', 'jpeg', 'gif'],
                imageUploadURL : "{{ url_for('upload.UploadBlogImage', editorType='Editor.md') }}",
                /*
                     上传的后台只需要返回一个 JSON 数据，结构如下：
                     {
                        success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
                        message : "提示的信息，上传成功或上传失败及错误信息等。",
                        url     : "图片地址"        // 上传成功时才返回
                     }
                */
                emoji : true,                 // Emoji表情
                saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                searchReplace : true,
                flowChart : true,             // 开启流程图支持，默认关闭
                sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            });
        });
    </script>
{% endif %}

<script type="text/javascript">
    // 提交文章数据
    function postForm() {
        {%- if request.args.get("editor", "wangEditor") == "wangEditor" %}
        blog = $('#CreateBlogFormId').serialize();
        {% else %}
        data = $('#CreateBlogFormId').serializeArray();
        blog = {"title": data[0].value, "tag": data[1].value, "catalog": data[2].value, "sources": data[3].value, "content": Editor.getHTML(), "author": data[6].value};
        {% endif -%}
        console.debug(blog);
        $.ajax({
            url: '{{ url_for("api.blog") }}',
            method: 'POST',
            datatype: 'json',
            data: blog,
            success: function(res) {
                console.log(res);
                if (res.code == 0){
                    layer.msg("提交文章成功！", {icon: 1, time: 3*1000})
                    if ( isNaN(res.data) ) {
                        location.reload(true);
                    } else {
                        window.location="/blog/" + res.data + ".html";
                    }
                } else {
                    layer.msg("提交文章失败，请重试提交或报告错误！\n错误原因是：" + res.msg, {icon: 2, time: 15*1000});
                }
            },
        });
    };
</script>
{% endblock %}
